<template>
	<view class="content">
		<view class="opinion-content">
			<view class="count-box">
				<view>{{myOpinion.length}}/500</view>
				<text>字</text>
			</view>
			<textarea placeholder="請輸入你的投訴與建議" placeholder-style="color:#999999;"  v-model="myOpinion" maxlength="500"></textarea>
		</view>
		<view class="btn" @click="toFace">提交</view>
	</view>
</template>

<script>
	import {toFeedback} from '../../../request/api.js'
	export default {
		data() {
			return {
				myOpinion:''
			};
		},
		methods:{
			async toFace(){
				uni.showLoading({
					title:"提交中..."
				})
				let res=await toFeedback({content:this.myOpinion});
				console.log(res);
				uni.hideLoading();
				if(res.code==1){
					uni.showToast({
						title:res.msg,
						icon: 'none'
					})
					this.myOpinion='';
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#fafafa;
	}
	.content{
		width:690rpx;margin-left:auto;
		margin-right:auto;padding-top:30rpx;
		.opinion-content{
			width:100%;padding:25rpx;box-sizing: border-box;
			border-radius: 20rpx;background-color: #ffffff;
			height:400rpx;box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
			position:relative;
			textarea{
				width:100%;height:400rpx;font-size:26rpx;
				line-height:37rpx;color:#333333;
			}
			.count-box{
				position:absolute;bottom:24rpx;right:24rpx;
				font-size: 26rpx;line-height:37rpx;
				color:#D71B0A;display: flex;align-items: center;
				text{
					color:#040404;margin-left:5rpx;
				}
			}
		}
		.btn{
			width:690rpx;height:98rpx;display: flex;
			align-items: center;justify-content: center;
			background-color:#040404;border-radius: 98rpx;
			font-size:36rpx;color:#ffffff;font-weight: 500;
			position:absolute;left:30rpx;bottom:60rpx;
		}
	}
	
</style>
